<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>填空题</title>
</head>
<body>
<div class="easyui-layout" data-options="fit:true,border:false">
  <div data-options="region:'west',title:'题类',split:true,hideCollapsedContent:false" style="width:240px;">
    <ul id="completion_tree_20210419"></ul>
  </div>
  <div data-options="region:'center',border:true">
    <table id="completion_dg_20210419"></table>
  </div>
</div>

<div id="tb_completion_dg_20210419" style="padding:2px 5px;">
  <a href="javascript:" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="$('#dialog_20210419_completion_addOrUpdateOrAdd').dialog('open').dialog('center').dialog('setTitle','添加')">添加</a>
  <a href="javascript:" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
  <a href="javascript:" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
  Date From: <input class="easyui-datebox" style="width:110px">
  To: <input class="easyui-datebox" style="width:110px">
  难易度:
  <select class="easyui-combobox" panelHeight="auto" style="width:100px">
    <option value="1">中等</option>
    <option value="2">简单</option>
    <option value="3">难</option>
  </select>
  <a href="javascript:" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
</div>

<div id="dialog_20210419_completion_addOrUpdateOrAdd" style="padding:10px 10px;display: none;">
  <form id="completion_form_20210422" method="post" data-options="novalidate:true">
    <div style="margin-bottom:20px">
      <table> <tr> <td width="80">填空题目：</td> <td><textarea name="editorTitleCompletion" id="editorTitleCompletion"> </textarea></td> </tr> </table>
    </div>
    <div style="margin-bottom:20px">
      <input id="numTextboxID1" name="numTextboxID1" class="easyui-textbox" style="width:100%;" data-options="
        label: '填空内容1:',
        prompt: '请输入参考答案',
        iconWidth: 22,
        required:true,
        icons: [{
            iconCls:'icon-add',
            handler: function(e){
               aa()
            }
        }]
      ">
      <script>
        let numTextbox = 2;
        function aa(){
          $("" +
              "<div style=\"margin-bottom:20px\">" +
                  "<input id=\"numTextboxID"+numTextbox+"\" name=\"numTextboxID"+numTextbox+"\" class=\"easyui-textbox\" style=\"width:100%;\" data-options=\"" +
                  "label: '填空内容"+numTextbox+":',prompt: '请输入参考答案',iconWidth: 22,required:true,icons: [{iconCls:'icon-remove'," +
                  "handler: function(e){$('#numTextboxID"+numTextbox+"').textbox('destroy');}}]\" />" +
                  "</div>"
          ).appendTo("#addtextbox20210419");
          $.parser.parse();
          numTextbox++;
        }
      </script>

    </div>
    <div id="addtextbox20210419">

    </div>
    <div style="margin-bottom:20px;margin-top: 20px;">
      <select class="easyui-combobox" name="nanduxishu" id="nanduxishu" label="题的难度：" data-options="panelHeight:'auto',required:true" >
        <option value="1">简单</option>
        <option value="2">中等</option>
        <option value="3">难</option>
      </select>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input class="easyui-switchbutton" checked name="status" id="status" label="状态：" labelWidth="50" data-options="onText:'正常',offText:'停用'" style="margin-right: 0px;">
    </div>

  </form>
</div>
<div id="dialog_20210419_completion_addOrUpdateOrAdd_button" style="display: none;">
  <a id="submitForm20210419close_completion" href="javascript:" >放弃</a>
  <a id="submitForm20210419_completion" href="javascript:">保存</a>
</div>

<script>

  $(function (){
    CKEDITOR.replace('editorTitleCompletion',{ height: 120 } );
  })

  $('#completion_tree_20210419').tree({
    method:'get',
    url:'./../structure/queryTreeAll',
    onClick: function(node){
      //判断点击的是叶节点
      if($(this).tree('isLeaf',node.target)){
        $('#completion_dg_20210419').datagrid({
          url:'./../paperTwo/queryPaperTwoPid',
          queryParams: {
            pid: node.id,
            titleType:2
          }
        });
        return;
      }
    }
  });

  $('#completion_dg_20210419').datagrid({
    method:'get',
    sortName:'id',
    sortOrder:'desc',
    fit:true,
    fitColumns:true,
    border:false,
    singleSelect:true,
    nowrap:false,//设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。
    columns:[[
      {field:'title',title:'题目',width:160},
      {field:'createTime',title:'创建时间',width:80,align:'center'},
      {field:'answer',title:'正确答案',width:80,align:'left',
        formatter: function(value,row,index){
          let jsobObject = eval('(' + value + ')');
          let str = '';
          for(let key in jsobObject){
            str += key + ': ' + jsobObject[key] + '<br/>';
          }
          return str;
        }
      },
      {field:'nanduxishu',title:'难易度',width:40,align:'center',
        formatter: function(value,row,index){
          if(value == '1'){
            return '简单';
          }
          if(value == '2'){
            return '中等';
          }
          if(value == '3'){
            return '难';
          }
        }
      },
      {field:'status',title:'状态',width:40,align:'center',
        formatter: function(value,row,index){
          if(value == '1'){
            return '正常';
          }
          return '停用';
        }
      }
    ]],
    toolbar:'#tb_completion_dg_20210419',
    pagination:true,
    rownumbers:true
  });

  $(function (){
    $('#dialog_20210419_completion_addOrUpdateOrAdd').dialog({
      width: '50%',
      height: '80%',
      closed: true,
      modal: true,
      onBeforeOpen: function (none){
        let treeSelect = $('#completion_tree_20210419').tree('getSelected');
        if(treeSelect){
          if($('#completion_tree_20210419').tree('isLeaf',treeSelect.target)){
            return true;
          }
        }
        new jBox('Notice', {
          color: 'red',
          autoClose: 2500,
          content: '请先选中科目！',
          showCountdown: true,
          animation: 'slide'
        });
        return false;
      },
      buttons:'#dialog_20210419_completion_addOrUpdateOrAdd_button'
    });
  })

  $(function () {
    $('#submitForm20210419_completion').linkbutton({
      iconCls: 'icon-ok',
      onClick: function (none) {
        submitFormCompletion2021();
      }
    });
    $('#submitForm20210419close_completion').linkbutton({
      onClick: function (none) {
        $('#dialog_20210419_completion_addOrUpdateOrAdd').dialog('close');
        $('#completion_form_20210422').form('clear');
        CKEDITOR.instances.editorTitleCompletion.setData('');
      }
    });
  })
  //修改和保存
  function submitFormCompletion2021(){

    if(!$('#completion_form_20210422').form('enableValidation').form('validate')){
      return
    }

    let status = $('#completion_form_20210422 #status').switchbutton('options').checked;
    if(status){
      status = 1;
    }else {
      status = 0;
    }

    let form20210426 = $('#completion_form_20210422').serializeArray();

    let pid = $('#completion_tree_20210419').tree('getSelected').id;
    let editorTitleCompletion = CKEDITOR.instances.editorTitleCompletion.getData();
    let fsa = $('#completion_form_20210422').serializeArray();
    let answer = {};
    let keyTemID = 1;
    for(let jsonObject of fsa){
      let name =  jsonObject.name;
      let value = jsonObject.value.trim();
      if(name.indexOf('numTextboxID') != -1 ){
        answer[keyTemID] = value;
        keyTemID++;
      }
    }
    let nanduxishu = $('#completion_form_20210422 #nanduxishu').combobox('getValue');
    let ajaxData = {pid:pid, title:editorTitleCompletion,titleType:2, answer:JSON.stringify(answer), nanduxishu:nanduxishu, status:status };

    $.ajax({
      type: 'POST',
      url: './../paperTwo/mergePaperTwo',
      data: ajaxData,
      success: function(data){
        if(data.code == 200){
          new jBox('Notice', {
            color: 'green',
            autoClose: 2500,
            content: '保存成功。',
            showCountdown: true,
            animation: 'slide'
          });
          $('#dialog_20210419_completion_addOrUpdateOrAdd').dialog('close');
          $('#completion_dg_20210419').datagrid('load');
        }else{
          new jBox('Notice', {
            color: 'red',
            autoClose: 2500,
            content: '保存失败！',
            showCountdown: true,
            animation: 'slide'
          });
        }
      }
    });
  }
</script>
</body>
</html>